<!-- 新增房源 -->

<script>
    $('#myTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })
    $('#myTabs a[href="#profile"]').tab('show') // Select tab by name
    $('#myTabs a:first').tab('show') // Select first tab
    $('#myTabs a:last').tab('show') // Select last tab
    $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
</script>
<div style="width: 100%;height: 800px;background-image: url('dist/img/add-background.jpg');padding: 10px 10px">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" style="margin: 10px 10px;background-color:lightgrey ">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">查找房源</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">填写基本信息</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">添加出售卖点</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">添加联系人</a></li>
    </ul>

    <!-- Tab panes -->
    <form>
        <div class="tab-content">
            <!--add 第一页 -->
            <div role="tabpanel" class="tab-pane active" id="home" style="background-color: white;margin: 10px 10px;width: 100%;height: 700px;padding-top: 50px">
                <div style="width: 100% ;height: 100px;padding-left: 10px">
                    <div style="width: 100% ;height: 50px">
                        城市:
                        <select style="width: 20% ;height: 25px ;margin-right: 10%">
                            <option>上海</option>
                        </select>
                        城区:
                        <select style="width: 20% ;height: 25px ;margin-right: 10%">
                            <option>上海</option>
                        </select>
                        片区:
                        <select style="width: 10% ;height: 25px ">
                            <option>请选择</option>
                        </select>
                    </div>
                    <div style="width: 100% ;height: 50px">
                        地址:
                        <input style="width: 20% ;margin-right: 1%"/>
                        <select style="width: 5% ;height: 25px ;margin-right: 1%">
                            <option>1</option>
                        </select>
                        <select style="width: 5% ;height: 25px ;margin-right: 1%">
                            <option>1层</option>
                        </select>
                        <select style="width: 5% ;height: 25px ;margin-right: 24%">
                            <option>101</option>
                        </select>
                        委托类型
                        <select style="width: 10% ;height: 25px ">
                            <option>出售</option>
                        </select>
                    </div>
                </div>

                <div style="padding-top: 15px;width: 100%;height: 50px ;margin: 50px 10px;border-color: green;color: green;border-width: 1px;border-style: solid;text-align: center ;display: block">
                    恭喜,该房屋不存在相同的委托信息,您可以增加
                </div>

                <div style="padding-top: 15px;width: 100%;height: 50px ;margin: 50px 10px;border-color: red;color: red;border-width: 1px;border-style: solid;text-align: center ;display: block">
                    对不起,该房屋存在相同的委托信息,您不可以增加
                </div>
            </div>
            <!--add 第二页 -->
            <div role="tabpanel" class="tab-pane" id="profile" style="background-color: white;width: 100%;height: 800px;padding: 20px 20px">
                <div style="width: 100%;height: 40px">
                    同心城(同心路649弄)-8栋-0601
                </div>
                <div style="width: 100%;height: 180px;border-top-style: solid;border-top-color: lightgrey;border-width: 1px">
                    <div style="width: 100% ;height: 50px;padding-top: 15px">
                        <i class="glyphicon glyphicon-home" style="margin-right: 5%"></i> 出售标签:&nbsp;
                        <input type="checkbox"> &nbsp;满五&nbsp;&nbsp;
                        <input type="checkbox"> &nbsp;满二&nbsp;&nbsp;
                        <input type="checkbox"> &nbsp;唯一&nbsp;&nbsp;
                        <input type="checkbox"> &nbsp;地铁房
                    </div>
                    <div style="margin-left: 5%;width: 100%;height: 120px">
                        <span style="margin-top: 10px;float: left">&nbsp;注释:</span>
                        <textarea placeholder="为方便记忆,请添加房源注释" cols="80" rows="5"></textarea>
                    </div>
                </div>
                <div style="width: 100%;height: 150px;border-top-style: solid;border-top-color: lightgrey;border-width: 1px">

                    <div style="width: 100% ;height: 50px;padding-top: 15px">
                        <i class="glyphicon glyphicon-file" style="margin-right: 5%"></i>
                        挂牌价:&nbsp;<input type="text"> 万元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        底价:&nbsp;<input type="text"> 万元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        原购价:&nbsp;<input type="text"> 万元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        单价:&nbsp;<input type="text" style="width: 5%"> 万元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>

                    <div style="width: 100% ;height: 50px;padding-top: 15px;padding-left: 5%">
                        建筑面积:&nbsp;<input type="text"> 万元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        朝向:&nbsp;
                        <select style="width: 8%;height: 25px;margin-right: 8%">
                            <option>东</option>
                        </select>
                        户型:&nbsp;<input type="text" style="width: 2%">&nbsp;室
                        <input type="text" style="width: 2%">&nbsp;厅<input type="text" style="width: 2%">&nbsp;卫
                        <input type="text" style="width: 2%">&nbsp;厨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        梯户比例:&nbsp;<input type="text" style="width: 2%">&nbsp;梯
                        <input type="text" style="width: 2%">&nbsp;户
                    </div>
                    <div style="width: 100% ;height: 50px;padding-top: 15px;padding-left: 5%">
                        房屋用途:&nbsp;
                        <select style="width: 15%;height: 25px;margin-right: 12%">
                            <option>住宅</option>
                        </select>
                        房屋类型:&nbsp;
                        <select style="width: 15%;height: 25px;margin-right: 12%">
                            <option>住宅</option>
                        </select>
                        楼层:&nbsp;
                        <input type="text" style="width: 10%">
                    </div>
                </div>

                <div style="width: 100%;height: 210px;border-top-style: solid;border-top-color: lightgrey;border-width: 1px">
                    <div style="width: 100% ;height: 50px;padding-top: 15px;padding-left: 0%">
                        <i class="glyphicon glyphicon-file" style="margin-right: 5%"></i>
                        现状:&nbsp;
                        <select style="width: 15%;height: 25px;margin-right: 55%">
                            <option>住宅</option>
                        </select>
                        物业费:&nbsp;
                        <input type="text" style="width: 10%">
                    </div>
                    <div style="width: 100% ;height: 50px;padding-top: 15px;padding-left: 5%">
                        装修:&nbsp;
                        <select style="width: 15%;height: 25px;margin-right: 11%">
                            <option>精装</option>
                        </select>
                        配套:&nbsp;
                        <select style="width: 15%;height: 25px;margin-right: 11%">
                            <option>请选择</option>
                        </select>
                        来源:&nbsp;
                        <select style="width: 15%;height: 25px;margin-right: 11%">
                            <option>请选择</option>
                        </select>
                    </div>
                    <div style="width: 100% ;height: 50px;padding-top: 15px;padding-left: 5%">
                        看房时间:&nbsp;
                        <select style="width: 15%;height: 25px;margin-right: 11%">
                            <option>精装</option>
                        </select>
                        是否有贷款:&nbsp;
                        <select style="width: 15%;height: 25px;margin-right: 11%">
                            <option></option>
                        </select>
                    </div>
                    <div style="width: 100% ;height: 50px;padding-top: 15px;padding-left: 5%">
                        预计交房时间:&nbsp;
                        <input type="text">
                    </div>
                </div>
                <div style="width: 100%;height: 150px;border-top-style: solid;border-top-color: lightgrey;border-width: 1px">
                    <div style="width: 100% ;height: 50px;padding-top: 15px;padding-left: 0%">
                        <i class="glyphicon glyphicon-file" style="margin-right: 5%"></i>
                        产权性质:&nbsp;
                        <select style="width: 15%;height: 25px;margin-right: 6%">
                            <option>住宅</option>
                        </select>
                        共有情况:&nbsp;
                        <select style="width: 15%;height: 25px;margin-right: 6%">
                            <option>请选择</option>
                        </select>
                        产证日期:&nbsp;
                        <input type="text" style="width: 10%">
                        产权人:&nbsp;
                        <input type="text" style="width: 10%">
                    </div>
                    <div style="width: 100% ;height: 50px;padding-top: 15px;padding-left: 5%">
                        产权备注:&nbsp;
                        <input type="text" style="width: 50%">
                    </div>
                </div>
            </div>
            <!--add 第三页 -->
            <div role="tabpanel" class="tab-pane" id="messages" style="padding: 20px 20px;background-color: white;width: 100%;height: 800px">
                <div style="width: 100%;height: 100%;padding: 20px 20px;border-width: 2px ;border-color: lightgrey;border-style: solid">
                    <div style="width: 100%;height: 60px">
                        <h3>房友网房源出售标题卖点</h3>
                    </div>
                    <div style="border-top-color: lightgrey;padding-top: 15px;border-top-style: solid;border-width: 2px;width: 100%;height: 100px">
                        <div style="float: left;width: 8%;height:100% ">户型:</div>
                        <div style="float: left;width: 90%;height:100% ">
                            <input type="checkbox" style="margin-left: 2%">&nbsp;主卧朝南 <input type="checkbox" style="margin-left: 2%">&nbsp;大开间
                            <input type="checkbox" style="margin-left: 2%">&nbsp;大两房 <input type="checkbox" style="margin-left: 2%">&nbsp;小户型
                            <input type="checkbox" style="margin-left: 2%">&nbsp;客厅带阳台 <input type="checkbox" style="margin-left: 2%">&nbsp;带飘窗
                            <input type="checkbox" style="margin-left: 2%">&nbsp;双阳台 <input type="checkbox" style="margin-left: 2%">&nbsp;景观房
                            <input type="checkbox" style="margin-left: 2%">&nbsp;一门关 <input type="checkbox" style="margin-left: 2%">&nbsp;客厅朝南
                            <input type="checkbox" style="margin-left: 2%">&nbsp;南北通透
                            <br/><br/><input type="checkbox" style="margin-left: 2%">&nbsp;厨卫朝北
                            <input type="checkbox" style="margin-left: 2%">&nbsp;卫生全明 <input type="checkbox" style="margin-left: 2%">&nbsp;开放式厨房
                        </div>
                    </div>

                    <div style="border-top-color: lightgrey;padding-top: 15px;border-top-style: solid;border-width: 2px;width: 100%;height: 100px">
                        <div style="float: left;width: 8%;height:100% ">房屋结构:</div>
                        <div style="float: left;width: 90%;height:100% ">
                            <input type="checkbox" style="margin-left: 2%">&nbsp;独立电梯 <input type="checkbox" style="margin-left: 2%">&nbsp;带采光天井
                            <input type="checkbox" style="margin-left: 2%">&nbsp;下沉式花园 <input type="checkbox" style="margin-left: 2%">&nbsp;法式小高层
                            <input type="checkbox" style="margin-left: 2%">&nbsp;新式里弄 <input type="checkbox" style="margin-left: 2%">&nbsp;独栋别墅
                            <input type="checkbox" style="margin-left: 2%">&nbsp;联排别墅 <input type="checkbox" style="margin-left: 2%">&nbsp;叠加别墅
                            <input type="checkbox" style="margin-left: 2%">&nbsp;一提三户 <input type="checkbox" style="margin-left: 2%">&nbsp;复式房
                            <br/><br/><input type="checkbox" style="margin-left: 2%">&nbsp;错层住宅
                            <input type="checkbox" style="margin-left: 2%">&nbsp;跃层式住宅
                            <input type="checkbox" style="margin-left: 2%">&nbsp;loft户型 <input type="checkbox" style="margin-left: 2%">&nbsp;大平层
                            <input type="checkbox" style="margin-left: 2%">&nbsp;带阁楼
                        </div>
                    </div>

                    <div style="border-top-color: lightgrey;padding-top: 15px;border-top-style: solid;border-width: 2px;width: 100%;height: 100px">
                        <div style="float: left;width: 8%;height:100% ">位置:</div>
                        <div style="float: left;width: 90%;height:100% ">
                            <input type="checkbox" style="margin-left: 2%">&nbsp;小区中心位置 <input type="checkbox" style="margin-left: 2%">&nbsp;底楼房
                            <input type="checkbox" style="margin-left: 2%">&nbsp;顶楼房 <input type="checkbox" style="margin-left: 2%">&nbsp;繁华地段
                            <input type="checkbox" style="margin-left: 2%">&nbsp;近商圈 <input type="checkbox" style="margin-left: 2%">&nbsp;交通便利
                            <input type="checkbox" style="margin-left: 2%">&nbsp;环境优美 <input type="checkbox" style="margin-left: 2%">&nbsp;品质小区
                            <input type="checkbox" style="margin-left: 2%">&nbsp;闹钟取静 <input type="checkbox" style="margin-left: 2%">&nbsp;小区景观位置
                            <br/><br/><input type="checkbox" style="margin-left: 2%">&nbsp;非底楼房
                            <<input type="checkbox" style="margin-left: 2%">&nbsp;非顶楼房
                        </div>
                    </div>

                    <div style="border-top-color: lightgrey;padding-top: 15px;border-top-style: solid;border-width: 2px;width: 100%;height: 150px">
                        <div style="float: left;width: 8%;height:100% ">附加:</div>
                        <div style="float: left;width: 90%;height:100% ">
                            <input type="checkbox" style="margin-left: 2%">&nbsp;带露台 <input type="checkbox" style="margin-left: 2%">&nbsp;采光充足
                            <input type="checkbox" style="margin-left: 2%">&nbsp;得房率高 <input type="checkbox" style="margin-left: 2%">&nbsp;房型正气
                            <input type="checkbox" style="margin-left: 2%">&nbsp;黄金楼层 <input type="checkbox" style="margin-left: 2%">&nbsp;婚房首选
                            <input type="checkbox" style="margin-left: 2%">&nbsp;拎包入住 <input type="checkbox" style="margin-left: 2%">&nbsp;视野好
                            <input type="checkbox" style="margin-left: 2%">&nbsp;配合看房 <input type="checkbox" style="margin-left: 2%">&nbsp;诚意出售
                            <br/><br/><input type="checkbox" style="margin-left: 2%">&nbsp;精装好房
                            <input type="checkbox" style="margin-left: 2%">&nbsp;不限购
                            <input type="checkbox" style="margin-left: 2%">&nbsp;刚需好房 <input type="checkbox" style="margin-left: 2%">&nbsp;装修齐全
                            <input type="checkbox" style="margin-left: 2%">&nbsp;钥匙房 <input type="checkbox" style="margin-left: 2%">&nbsp;可接受置换
                            <input type="checkbox" style="margin-left: 2%">&nbsp;售后公房 <input type="checkbox" style="margin-left: 2%">&nbsp;无税房
                            <input type="checkbox" style="margin-left: 2%">&nbsp;带花园 <input type="checkbox" style="margin-left: 2%">&nbsp;随时看房
                            <br/><br/><input type="checkbox" style="margin-left: 2%">&nbsp;一楼送花园 <input type="checkbox" style="margin-left: 2%">&nbsp;带中央空调
                            <input type="checkbox" style="margin-left: 2%">&nbsp;带地暖 <input type="checkbox" style="margin-left: 2%">&nbsp;带游泳池
                            <input type="checkbox" style="margin-left: 2%">&nbsp;带家具家电 <input type="checkbox" style="margin-left: 2%">&nbsp;带车位
                            <input type="checkbox" style="margin-left: 2%">&nbsp;指纹入户 <input type="checkbox" style="margin-left: 2%">&nbsp;价格好谈
                            <input type="checkbox" style="margin-left: 2%">&nbsp;业主急售 <input type="checkbox" style="margin-left: 2%">&nbsp;配套完善
                        </div>
                    </div>

                    <div style="border-top-color: lightgrey;padding-top: 15px;border-top-style: solid;border-width: 2px;width: 100%;height: 100px">
                        <div style="float: left;width: 8%;height:100% ">装修:</div>
                        <div style="float: left;width: 90%;height:100% ">
                            <input type="checkbox" style="margin-left: 2%">&nbsp;中式风格 <input type="checkbox" style="margin-left: 2%">&nbsp;精装修
                            <input type="checkbox" style="margin-left: 2%">&nbsp;居家装修 <input type="checkbox" style="margin-left: 2%">&nbsp;西班牙风格
                            <input type="checkbox" style="margin-left: 2%">&nbsp;美式风格 <input type="checkbox" style="margin-left: 2%">&nbsp;欧式风格
                            <input type="checkbox" style="margin-left: 2%">&nbsp;地中海风格 <input type="checkbox" style="margin-left: 2%">&nbsp;田园风格
                            <br/><br/><input type="checkbox" style="margin-left: 2%">&nbsp;现代风格 <input type="checkbox" style="margin-left: 2%">&nbsp;简约风格
                            <input type="checkbox" style="margin-left: 2%">&nbsp;巴洛克风格
                            <input type="checkbox" style="margin-left: 2%">&nbsp;复古风格
                        </div>
                    </div>

                </div>
            </div>
            <!--add 第四页 -->
            <div role="tabpanel" class="tab-pane" id="settings" style="padding: 20px 20px;background-color: white;width: 100%;height: 800px">
                <div style="padding: 5px 15px;height:50px;width: 100%">
                    <h4 style="margin-right:2%;float: left">基本信息</h4>&nbsp;&nbsp;&nbsp;
                    <input class="btn btn-default" style="margin-top: 12px;float:left; background-color: red;height: 20px;padding-top: 0px" type="button" value="添加联系人">
                </div>
                <div>
                    <div style="height: 180px;border-color: lightgrey;border-style: solid;border-width: 1px;padding: 15px 20px;margin: 5px 5px">
                        <div style="height: 60px;width: 100%;padding-top: 8px">
                            姓名:<input type="text">
                            <select style="height: 25px;margin-right: 10%">
                                <option>性别</option>
                            </select>
                            手机:<input style="width: 30px" type="text" value="86">
                            <input type="text" style="margin-right: 10%">
                            固话:<input type="text" style="width: 30px" value="86">
                            <input type="text" style="width: 30px" value="021">
                            <input type="text">
                        </div>

                        <div style="height: 60px;width: 100%;padding-top: 8px">
                            来源:<select style="height: 25px;width: 20%;margin-right: 10%">
                            <option>请选择</option>
                        </select>
                            等级:<select style="height: 25px;width: 20%;margin-right: 10%">
                            <option>请选择</option>
                        </select>
                        </div>

                        <div style="height: 60px;width: 100%;padding-top: 8px">
                            地址:<input type="text" style="margin-right: 10%;width: 20%">
                            邮箱:<input type="text" style="margin-right: 10%;width: 20%">
                            其他方式:<input type="text" style="width: 20%">
                        </div>

                    </div>
                    <div class="form-group" style="text-align: center;margin-top: 20px">
                        <button type="submit" class="btn btn-default" style="background-color: red;color: white;width: 100px">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>